<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 登录</title>
    <link rel="stylesheet" th:href="@{/css/pages/login.css}">
    <link rel="stylesheet" th:href="@{/css/components/boi.css}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
</head>
<body>
    <div class="login-container">
        <div id="particles-js"></div> <!-- Particles.js 容器 -->
        <div class="login-card">
            <!-- 左侧品牌展示区 -->
            <div class="login-banner">
                <h1>智能医疗诊断助手</h1>
                <p>专业的医疗人工智能诊断系统，助力医生提高诊断效率</p>
                
                <!-- 小黄人面部表情 -->
                <div class="boi-container">
                    <figure class="Boi" style="--happiness:0.9; --derp:1; --px:0.5; --py:0.5;">
                        <div class="Boi-Blush Boi-Blush_L"></div>
                        <div class="Boi-Blush Boi-Blush_R"></div>
                        <div class="Boi-Eye Boi-Eye_L"></div>
                        <div class="Boi-Eye Boi-Eye_R"></div>
                        <div class="Boi-Mouth"></div>
                    </figure>
                    
                    <!-- 互动按钮 -->
                    <div class="boi-buttons">
                        <a class="boi-btn boi-btn-tie" href="javascript:void(0)">贴贴</a>
                        <a class="boi-btn boi-btn-beat" href="javascript:void(0)">暴揍</a>
                    </div>
                </div>
                
                <!-- 医疗图标（已不需要，被小黄人替代） -->
                <!-- <div class="icon-container">
                    <img th:src="@{/images/medical-logo.svg}" alt="医疗图标" width="80" height="80">
                </div> -->
            </div>
            
            <!-- 右侧登录表单区 -->
            <div class="login-form">
                <div class="form-container">
                    <div class="form-header">
                        <h3>用户登录</h3>
                        <p>欢迎回来，请登录您的账号</p>
                    </div>
                    
                    <!-- 提示信息容器 -->
                    <div id="alertContainer"></div>
                    
                    <form id="loginForm">
                        <div class="form-group">
                            <label for="username" class="form-label">用户名</label>
                            <input 
                                type="text" 
                                id="username" 
                                name="username" 
                                class="form-input" 
                                placeholder="请输入用户名"
                                autocomplete="username"
                                required
                            >
                            <div id="username-error" class="error-message"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="password" class="form-label">密码</label>
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                class="form-input" 
                                placeholder="请输入密码"
                                autocomplete="current-password"
                                required
                            >
                            <div id="password-error" class="error-message"></div>
                        </div>
                        
                        <div class="form-remember">
                            <input type="checkbox" id="rememberMe" name="rememberMe">
                            <label for="rememberMe">记住用户名</label>
                        </div>
                        
                        <div class="login-action">
                            <button 
                                type="submit" 
                                id="loginButton" 
                                class="btn btn-primary"
                            >
                                <span>登录</span>
                            </button>
                        </div>
                        
                        <div class="form-links">
                            <a th:href="@{/forgot-password}">忘记密码?</a>
                            <a th:href="@{/register}">注册账号</a>
                        </div>
                        
                        <div class="divider">或使用第三方账号登录</div>
                        
                        <div class="social-login">
                            <a href="#" class="social-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#4285F4">
                                    <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/>
                                </svg>
                            </a>
                            <a href="#" class="social-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#1877F2">
                                    <path d="M13.397,20.997v-8.196h2.765l0.411-3.209h-3.176V7.548c0-0.926,0.258-1.56,1.587-1.56h1.684V3.127 C15.849,3.039,15.025,2.997,14.201,3c-2.444,0-4.122,1.492-4.122,4.231v2.355H7.332v3.209h2.753v8.202H13.397z"/>
                                </svg>
                            </a>
                            <a href="#" class="social-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000">
                                    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/>
                                </svg>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 脚本引入 -->
    <script th:src="@{/js/effects/particles.js}"></script>
    <script th:src="@{/js/effects/boi.js}"></script>
    <script th:src="@{/js/utils/validator.js}"></script>
    <script th:src="@{/js/utils/auth-service.js}"></script>
    <script th:src="@{/js/pages/login.js}"></script>
    <script>
        // 初始化粒子效果
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof particlesJS !== 'undefined') {
                particlesJS('particles-js', {
                    particles: {
                        number: { value: 80, density: { enable: true, value_area: 800 } },
                        color: { value: '#4ade80' },
                        shape: { type: 'circle' },
                        opacity: { value: 0.5, random: false },
                        size: { value: 3, random: true },
                        line_linked: {
                            enable: true,
                            distance: 150,
                            color: '#38bdf8',
                            opacity: 0.4,
                            width: 1
                        },
                        move: {
                            enable: true,
                            speed: 2,
                            direction: 'none',
                            random: false,
                            straight: false,
                            out_mode: 'out',
                            bounce: false
                        }
                    },
                    interactivity: {
                        detect_on: 'canvas',
                        events: {
                            onhover: { enable: true, mode: 'grab' },
                            onclick: { enable: true, mode: 'push' },
                            resize: true
                        },
                        modes: {
                            grab: { distance: 140, line_linked: { opacity: 1 } },
                            push: { particles_nb: 4 }
                        }
                    },
                    retina_detect: true
                });
            }
        });
    </script>
</body>
</html> 